'use strict';
var React = require('react');

class ReLeftTabItem extends React.Component {
    constructor(props) {
        super(props);
        this.state={
          hide:false
        };
        this.renderItems=this.renderItems.bind(this);
        this.renderContentClass=this.renderContentClass.bind(this);
        this.itemClick=this.itemClick.bind(this);
        this.titleClick=this.titleClick.bind(this);
        this.renderTitleContent=this.renderTitleContent.bind(this);
        this.renderTabItemTitleClass=this.renderTabItemTitleClass.bind(this);
        this.renderTabItemContentItemClass=this.renderTabItemContentItemClass.bind(this);
    }

    renderTabItemContentItemClass(key){
        if(this.props.activeKey==key){
            return 'ReLeftTabItemContentItem active';
        }
        else{
            return 'ReLeftTabItemContentItem';
        }
    }

    renderItems(){
        if(this.props.childrenItems) {
            return this.props.childrenItems.map((item, i)=> {
                return <li onClick={this.itemClick.bind(this,this.props.keyStrArray[i])} className={this.renderTabItemContentItemClass(this.props.keyStrArray[i])} key={'ReLeftTabItemContentItem'+i}>{item}</li>
            });
        }
    }

    renderContentClass(){
        if(this.state.hide){
            return 'ReLeftTabItemContent hide'
        }
        else{
            return 'ReLeftTabItemContent'
        }
    }


    titleClick(){
        if(this.props.childrenItems) {
            var result = !this.state.hide;
            this.setState({
                hide: result
            });
        }
        else{
            this.itemClick(this.props.keyStr);
        }
    }

    //渲染一级标题样式，区分active样式
    renderTabItemTitleClass(){
        if(this.props.keyStr==this.props.activeKey){
            return "ReLeftTabItemTitle active";
        }
        else{
            return "ReLeftTabItemTitle";
        }
    }

    renderTitleContent(){
        if(this.props.childrenItems) {
            if(this.state.hide){
                return <div><span className="ReLeftTabItemTitleText">{this.props.mainTitle}</span><span className="ReLeftTabItemIcon">∨</span></div>
            }
            else{
                return <div><span className="ReLeftTabItemTitleText">{this.props.mainTitle}</span><span className="ReLeftTabItemIcon">∧</span></div>
            }
        }
        else{
            return <div>{this.props.mainTitle}</div>
        }
    }

    itemClick(keyStr){
        this.props.itemClick(keyStr);
    }

    render(){
       return <div className="ReLeftTabItemContainer">
            <div className={this.renderTabItemTitleClass()}  onClick={this.titleClick}>{this.renderTitleContent()}</div>
            <ul className={this.renderContentClass()}>
                {this.renderItems()}
            </ul>
        </div>
    }
}
module.exports=ReLeftTabItem;